<script setup>
  import { markRaw, ref, watch } from "vue";
  import { useStore } from "@/store/index.js";
  import { useStyleStore } from "@/store/styleStore.js";
  import { ElMessage, ElMessageBox } from "element-plus";
  import { CloseBold, Delete } from "@element-plus/icons-vue";
  import collectionApi from '@/api/collection/index.js'
  import LocalStoreUtil from "@/utils/LocalStoreUtil.js";
  import ResponseUtil from "@/utils/ResponseUtil.js";

  let store = useStore();
  let styleStore = useStyleStore();

  // 关闭收藏项编辑弹出
  const close = () => {
    if (styleStore.collect.operationAlertLoading1 || styleStore.collect.operationAlertLoading2) {
      ElMessage.warning('正在请求服务器，无法关闭编辑菜单！');
      return;
    }
    // 关闭收藏项操作弹窗组件
    styleStore.collect.method.closeOperationAlert();
  }

  // 新增或编辑收藏项
  const save = (data) => {
    // 校验是否正在保存，禁止重复点击
    if (styleStore.collect.operationAlertLoading1) return;

    // 新增或编辑提交按钮播放加载动画
    styleStore.collect.operationAlertLoading1 = true;

    // 请求服务器
    collectionApi.save(data).then(response => {
      ResponseUtil.data(response).dispose(response => {

        // 结束新增或编辑提交按钮加载动画
        styleStore.collect.operationAlertLoading1 = false;

        // 判断是否请求成功
        if (response.code === '200') {
          data.isDefault = false;
          data.isAdd = false;
          if (!data.id) {
            data.displayType = 1;
            data.iconAlias = response.data.iconAlias;
            data.iconUrl = response.data.iconUrl;
            data.ordered = response.data.ordered;
            data.id = response.data.id;
            store.collection.method.addItem(data);
          } else {
            data.displayType = 4;
            store.collection.method.editItem(data);
          }

          // 重置本地缓存收藏列表数据
          LocalStoreUtil.clearCollectList()
          LocalStoreUtil.setCollectList(store.collection.collectionList);
        }
        // 关闭收藏项操作弹窗组件
        styleStore.collect.method.closeOperationAlert();
      })
    })

  }

  const del = (id) => {
    ElMessageBox.confirm('确认要删除该收藏项吗？', {
      confirmButtonText: '删除',
      cancelButtonText: '取消',
      type: 'warning',
      icon: markRaw(Delete),
    }).then(() => {
      // 播放删除提交按钮加载动画
      styleStore.collect.operationAlertLoading2 = true;

      // 请求服务器删除收藏项
      collectionApi.delById(id).then(response => {
        ResponseUtil.data(response).dispose(response => {
          // 结束删除提交按钮加载动画
          styleStore.collect.operationAlertLoading2 = false;

          // 判断是否请求成功
          if (response.code === '200') {
            // 从收藏项列表中移除该收藏项
            store.collection.method.delItemById(id);

            // 重置本地缓存收藏列表数据
            LocalStoreUtil.clearCollectList()
            LocalStoreUtil.setCollectList(store.collection.collectionList);

            ElMessage.success('删除成功');
          }
          // 关闭收藏项操作弹窗组件
          styleStore.collect.method.closeOperationAlert();
        })
      })
    })

  }

</script>

<template>
  <div :class="['operation-basic', styleStore.collect.operationAlertTop ? 'collect-show-animation':'collect-hide-animation']"
       :style="['left:' + styleStore.collect.place.x + 'px', 'top:' + styleStore.collect.place.y + 'px']">
    <div class="header">
      <div class="header-title">{{ styleStore.collect.operationAlertTitle }}</div>
      <div class="header-close">
        <el-icon class="icon" title="关闭" @click="close()">
          <CloseBold />
        </el-icon>
      </div>
    </div>

    <input type="text" v-model="store.collect.currentItemData.title" class="input-basic" placeholder="收藏项名称">
    <input type="text" v-model="store.collect.currentItemData.url" class="input-basic" placeholder="收藏项链接">
    <input type="text" v-model="store.collect.currentItemData.ordered" class="input-basic" placeholder="收藏项排序值">

    <div class="button-basic submit"
         @click="save(store.collect.currentItemData)"
         v-loading="styleStore.collect.operationAlertLoading1">提交</div>
    <div class="button-basic remove"
         v-if="styleStore.collect.operationAlertType === 1"
         @click="del(store.collect.currentItemData.id)" v-loading="styleStore.collect.operationAlertLoading2">删除</div>
    <div class="button-basic cancel" @click="close()"
         v-if="styleStore.collect.operationAlertType === 0">取消</div>
  </div>
</template>

<style scoped>
  .operation-basic {
    position: absolute;
    width: 400px;
    overflow: hidden;
    background-color: white;
    border-radius: 12px;
    padding: 5px 15px;
    color: rgb(58, 58, 58);
    transition: left .3s, top .3s, opacity .3s;
    //transition: left .3s, top .3s, transform 0.3s ease, box-shadow .3s, opacity .3s;
  }
  .header {
    width: 100%;
    height: 40px;
  }
  .header-title {
    height: 30px;
    display: flex;
    align-items: center;
    float: left;
  }
  .header-close {
    width: 15px;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    float: right;
  }
  .header-close .icon:hover {
    cursor: pointer;
  }

  .input-basic {
    padding: 0;
    width: 100%;
    height: 38px;
    display: block;
    border-radius: 0;
    border: 1px solid rgb(218, 218, 218);
    margin-top: 15px;
    font-size: 15px;
    text-indent: 10px;
    color: rgb(78, 78, 78);
  }
  .input-basic:first-of-type {
    margin-top: 0;
  }
  .input-basic:focus {
    outline: none;
  }

  .button-basic {
    width: 100%;
    height: 38px;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 15px 0;
    transition: all 0.2s;
  }
  .button-basic:last-of-type {
    margin-bottom: 10px;
  }
  .button-basic:hover {
    cursor: pointer;
  }

  .submit {
    background-color: rgb(103, 194, 58);
  }
  .submit:hover {
    background-color: rgb(149, 212, 117);
  }
  .cancel {
    background-color: rgb(230, 162, 60);
  }
  .cancel:hover {
    background-color: rgb(238, 190, 119);
  }
  .remove {
    background-color: rgb(245, 108, 108);
  }
  .remove:hover {
    background-color: rgb(248, 152, 152);
  }

  .collect-show-animation {
    animation-name: showAnimation;
    animation-duration: 0.4s;
    animation-fill-mode: forwards;
  }
  .collect-hide-animation {
    display: none;
    animation-name: hideAnimation;
    animation-duration: 0.4s;
    animation-fill-mode: forwards;
  }

  @keyframes showAnimation {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
  @keyframes hideAnimation {
    from {
      display: block;
      opacity: 1;
    }
    to {
      opacity: 0;
    }
  }

</style>